<template>
  <div class="default-container">
    <div class="table-data-view" v-loading='tableLoading'>
      <div class="common-screen-view">
        <div class="common-screen-cell">
          <!-- <div class="common-screen-title"  style="width:120px">角色名称：</div> -->
          <el-input v-model="roleName" :placeholder="$t('tables_title.name')"></el-input>
        </div>
        <el-button type="primary" icon="el-icon-search" @click="searchRoleList">{{$t('global.search')}}</el-button>
        <el-button type="primary" icon="el-icon-plus" v-if="checkPerm('role_add')" @click="addRole">{{$t('global.add')}}</el-button>
        <el-button type="primary" icon="el-icon-folder-opened" @click="exportData">{{$t('global.export')}}</el-button>
      </div>
      <table-list ref="tableView" class="table-list-view" :tableConfig="tableConfig" :tableData="tableData" @reviseRole="reviseRole" @delRole="delRole"
        @setRoleAuthority="setRoleAuthority"></table-list>
      <table-pagination
        :total="count"
        :currentPage="pageNow"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange">
      </table-pagination>
    </div>

    <el-dialog :title="$t('role_management.edit_role_info')" :close-on-click-modal="false" :visible.sync="roleInfoVisible" width="600px">
      <add-edit-role :isEdit="isEdit" :editRoleInfo="editRoleInfo" @cancelView="cancelView" @refreshData="refreshData"></add-edit-role>
    </el-dialog>

    <el-dialog :title="$t('role_management.per_config')" :close-on-click-modal="false" :visible.sync="authorityVisible" width="400px">
      <set-authority :roleId="roleId" @refreshData="refreshData" @cancelView="cancelView"></set-authority>
    </el-dialog>
  </div>
</template>

<script>

import { checkPermission } from '@/common/utils/permission.js'
import { getRoleHomeList,deleteRole } from '@/api/roleApi.js'
import { exportToExcel } from '@/common/utils/util.js'
export default {
  data(){
    return{
      tableLoading:false,
      roleInfoVisible:false,
      isEdit:false,
      authorityVisible:false,
      tableConfig:{},       //table的基本配置
      tableData:[],         //table数据源
      total: 0,             //数据总数
      pageNow:1,        //当前页码
      roleName:'',
      count:0,
      pageSize:10,      //每页查询数量
      editRoleInfo:{},
      roleId:''         //需要配置权限的roleId
    }
  },
  components:{
    tableList: () => import("@/components/common_tables.vue"),            //引入table组件
    tablePagination: () => import("@/components/table_pagination.vue"),    //引入页码组件   为方便拓展 把它与table组件分开封装
    addEditRole:()=>import("./add_edit_role.vue"),
    setAuthority:()=>import("./set_authority.vue"),
  },
  created(){
    this.tableConfig = {
      isCheckBox:true,
      props:[
        { type:"text", label:"tables_title.name", prop: "name"},
        { type:"text", label:"tables_title.superior_role", prop: "pName"},
        { type:"text", label:"tables_title.alias", prop: "description"},
      ],
      isOpt:true,
      optBtns:[
        {label:'global.modify',callback:'reviseRole',code:'role_edit'},
        {label:'global.delete',callback:'delRole',code:'role_remove'},
        {label:'role_management.per_config',callback:'setRoleAuthority',code:'role_setAuthority'}]
    }
    this.getRoleList()
  },
  methods:{
    searchRoleList(){       //搜索角色
      this.pageNow = 1
      this.getRoleList()
    },
    addRole(){              //添加角色
      this.editRoleInfo = {}
      this.isEdit = false
      this.roleInfoVisible = true
    },
    getRoleList(){              //获取角色列表
      this.tableLoading = true
      getRoleHomeList({
        roleName:this.roleName,
        page:this.pageNow,
        limit:this.pageSize
      }).then((res)=>{
        this.tableLoading = false
        if(res.status == 200){
          this.count = res.data.count
          this.tableData = res.data.data
        }else{
          this.$message.error(res.data.message)
        }
      }).catch((e)=>{
        this.tableLoading = false
      })
    },
    checkPerm(code){        //校验权限
      return checkPermission(code)
    },
    handleSizeChange(val){      //修改每页的显示条数
      this.pageSize = val
      this.pageNow = 1
      this.getRoleList()
    },
    handleCurrentChange(val){   //切换当前页码
      this.pageNow = val
      this.getRoleList()
    },
    reviseRole(row){          //修改role信息
      this.editRoleInfo = row
      this.isEdit = true
      this.roleInfoVisible = true
    },
    delRole(row){         //删除角色
      console.log(row)
      this.$confirm( this.$t('role_management.del_role') + ' "' + row.name + '"?',this.$t('global.tips'), {
        confirmButtonText: this.$t('global.confirm'),
        cancelButtonText: this.$t('global.cancel'),
        type: 'warning'
      }).then(() => {
        deleteRole({roleId:row.roleId}).then((res)=>{
          console.log(res)
          if(res.data.code == 200){
            this.$message({
              message: this.$t('global.del_success'),
              type: 'success'
            });
            this.pageNow = 1
            this.getRoleList()
          }else{
            this.$message.error(res.data.message)
          }
        })
      }).catch(() => {

      });
    },
    setRoleAuthority(row){        //设置角色权限
      this.roleId = row.roleId
      this.authorityVisible = true
    },
    cancelView(){       //关闭编辑角色弹窗
      this.roleInfoVisible = false
      this.authorityVisible = false
    },
    refreshData(){      //刷新表格数据
      this.roleInfoVisible = false
      this.authorityVisible = false
      this.page = 1
      this.getRoleList()
    },
    exportData(){
      let exportData = this.$refs.tableView.getCheckList()
      if(exportData.length == 0){
        this.$message({
          message: this.$t('global.select_export'),
          type: 'warning'
        });
        return
      }
      let columns = [
        {title:this.$t('tables_title.name'),key:'name'},
        {title:this.$t('tables_title.superior_role'),key:'pName'},
        {title:this.$t('tables_title.alias'),key:'description'},
      ]
      exportToExcel(columns,exportData,this.$t('global.table_data_title'))
    },
  }
}
</script>

<style lang="scss" scoped>

</style>
